<template>
    <div class="select-scene">
        <div class="input-wrap" v-if="hasInput">
            <el-input v-model="label" readonly @focus="showDialog" :placeholder="placeholder"></el-input>
            <i class="fa fa-trash-o del-icon" @click="deleteFun"></i>
        </div>
        <el-dialog v-dialog-drag :visible.sync="show" :title="title" :close-on-click-modal="false" :append-to-body="true"
            :before-close="closeDialog">
            <div class="search-box">
                <div class="search-form">
                    <el-input placeholder="请输入姓名" v-model="ruleForm.custName">
                        <template slot="append">
                            <el-button @click="clickQuery">搜索</el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="table-box">
                <el-table :height="400" v-loading="loading" :data="tableData.columnData"
                    @selection-change="selectionChange">
                    <el-table-column type="selection" v-if="multiple"></el-table-column>
                    <el-table-column label="姓名" prop="custName" key="custName" width="120" align='left'></el-table-column>
                    <el-table-column label="昵称" prop="custNick" key="custNick" width="120" align='left'></el-table-column>                
                    <el-table-column label="客户等级" prop="levelName" key="levelName" width="120" align='left'></el-table-column>                
                    <el-table-column label="公司" prop="compName" key="compName" min-width="200" align='left' show-overflow-tooltip></el-table-column>                
                    <el-table-column label="所在区域" prop="allAddressName" key="allAddressName" min-width="160" align='left' show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.allAddressName ? scope.row.allAddressName : '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" prop="mobile" key="mobile" width="130" align='left' ></el-table-column>
                    <el-table-column label="邮箱" prop="eMail" key="eMail" min-width="200" align='left'  show-overflow-tooltip></el-table-column>
                    <el-table-column label="标签" prop="lableName" key="lableName" width="130" align='left' show-overflow-tooltip></el-table-column>
                    <el-table-column label="备注" prop="descCont" key="descCont" min-width="200" align='left' show-overflow-tooltip></el-table-column>
                    <el-table-column label="来源" prop="sourceTypeName" key="sourceTypeName" width="130" align='left' show-overflow-tooltip></el-table-column>
                    <el-table-column label="负责人" prop="dutyName" key="dutyName" width="100" align='left' show-overflow-tooltip></el-table-column>
                    <el-table-column label="负责机构" prop="dutyDeptName" key="dutyDeptName" width="130" align='left' show-overflow-tooltip></el-table-column>                
                    <!-- <el-table-column label="状态" prop="statusName" key="statusName" width="130" align='center' >
                            <template slot-scope="scope">
                                {{ scope.row.statusName | dic(statusList) }}
                            </template>
                    </el-table-column>                 -->
                    <el-table-column label="创建时间" prop="crtDt" key="crtDt" width="160" align='center' >
                        <template slot-scope="scope">
                            {{ scope.row.crtDt |  formatDttm }}
                        </template>
                    </el-table-column>
                    <el-table-column label="修改时间" prop="updDt" key="updDt" width="160" align='center' >
                        <template slot-scope="scope">
                            {{ scope.row.updDt |  formatDttm }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="100" v-if="!multiple">
                        <template slot-scope="scope">
                            <el-button type="text" @click="selectThis(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <section class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize" layout="sizes,total,prev,pager,next"
                    :current-change.sync="tableData.currentPage" :current-page.sync="tableData.currentPage"
                    :total="tableData.total">
                </el-pagination>
            </section>
            <div class="sel-btn" style="text-align:right;margin-top:5px;" v-if="multiple">
                <el-button type="primary" @click="selectThisAll" :disabled="selection.length == 0">确认</el-button>
                <el-button @click="closeDialog">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { pageQueryCuPBaseFun } from '@/service/busi/customer/personal/index';
    import { isArray } from '@/utils/Tools';
    export default {
        name: 'selectScene', // 场景选择组件（弹窗）
        props: {
            multiple: {
                type: Boolean,
                default: false,
            },
            hasInput: { // 是否带输入框
                type: Boolean,
                default: false
            },
            value: {
                type: [String, Array],
                default () {
                    if (this.multiple) {
                        return []
                    }
                    return ''
                }
            },
            placeholder: {
                type: String,
                default: '请选择'
            }
        },
        components: {},
        data() {
            return {
                show: false,
                title: '选择客户',
                label: '', // 输入框绑定值
                ruleForm: {
                    custName: '',
                },
                tableData: {
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    columnData: [],
                },
                selection: [],
                loading: false,
            }
        },
        methods: {
            showDialog() {
                this.show = true;
                this.ruleForm.nameLk = '';
                this.clickQuery();
            },
            closeDialog() {
                this.show = false;
            },
            clickQuery() {
                this.tableData.currentPage = 1;
                this.queryListFun();
            },
            queryListFun() { // 查询分类下的场景
                let params = {
                    rowSize: this.tableData.pageSize,
                    startRow: this.tableData.currentPage,
                    custNameLike: this.ruleForm.custName,//市民名称
                }
                this.loading = true;
                pageQueryCuPBaseFun(params).then(res => {
                    this.tableData.columnData.splice(0, this.tableData.columnData.length);
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        console.log(data)
                        if (isArray(data.data) && data.data.length) {
                            this.tableData.columnData.push(...data.data);
                            this.tableData.total = data.total;
                        } else {
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            handleCurrentChange(val) {
                this.tableData.currentPage = val;
                this.queryListFun();
            },
            handleSizeChange(val) {
                this.tableData.currentPage = 1;
                this.tableData.pageSize = val;
                this.queryListFun();
            },
            selectionChange(selection) {
                this.selection = selection;
            },
            selectThis(row) {
                this.$emit('updateData', row);
                this.$emit('input', row.id);
                this.label = row.custName;
                this.$emit('update:label', this.label);
                this.closeDialog();
            },
            selectThisAll() {
                this.$emit('updateData', this.selection);
                this.$emit('input', this.selection.map(v => v.id));
                this.label = this.selection.map(v => v.custName).join();
                this.closeDialog();
            },
            deleteFun() {
                if (this.multiple) {
                    this.$emit('input', []);
                } else {
                    this.$emit('input', '');
                    this.$emit('updateData', {});
                }
                this.label = '';
            },
        }
    }

</script>

<style lang="scss" scoped>
    .select-scene {
        // display: inline-block;
        vertical-align: middle;
        // float: left;
    }

    .input-wrap {
        position: relative;
        height: 35px;
        line-height: 35px;

        /deep/ {
            .el-input {
                float: left;
            }

            .del-icon {
                position: absolute;
                top: 8px;
                right: 10px;
                cursor: pointer;
            }
        }
    }

</style>
<style lang="scss">
    .el-dialog__body {
        padding: 15px 20px 30px 20px;
    }

</style>
